<template>
<div>
<div class="serch">
<mt-search v-model="$route.params.id">

</mt-search>
<mt-button tepe="default" class="serch-bt">搜索</mt-button>
</div>
<ul>
  <li v-for="(item, index) in shoplist" :key="index"><img src="./img/1.jpg"/>
  <p>商品名</p>
    <span class="text-red">￥{{item.originalCost}}.00</span><span class="text-none">￥{{item.currentprice}}.00</span>
    <p><router-link to="/purchase" class="mint-button mint-button--primary mint-button--normal">立即购买</router-link></p>
  </li>
</ul>
</div>
</template>

<script>
export default {
  data() {
    return {
        shoplist:[{
        originalCost:10,
        currentprice:30
      },{
        originalCost:20,
        currentprice:40
      },{
        originalCost:30,
        currentprice:50
      },{
        originalCost:40,
        currentprice:60
      },{
        originalCost:50,
        currentprice:70
      }]
    }
  },methods: {
      
  }
}
</script>

<style scoped>
.mint-search{
  height:80px;
  margin-top:-20px;
}
.serch-bt{
  position:absolute;
  right:0;
  top:45px;
  z-index:23;
}
ul{
  width:98%;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
}
li{
  float:left;
  text-align:center;
  width:48%;
  margin:1%;
  height:auto;
  box-shadow: 0 4px 6px #888888;
  font-size:15px;
}
img{
  width:100%; 
  height:auto;
}
.text-red{
  color:red;
  line-height:40px;
}
.text-none{
  text-decoration:line-through;
  line-height:40px;

}
a{  
    display: line-block;
    height: 40px;
    line-height:40px;
    text-decoration: none;
}
a:hover{
    color: #fff;
    text-decoration: none;
    
}
</style>